<template>
	<view>
		<view class="shop-buy">
			<view class="collect" @click="collectClick">
				<img src="../static/icon/已购买.png" alt="" v-if="isCollected">
				<img src="../static/icon/未购买.png" alt="" v-else>
			</view>
			<view class="buy" @click="singleBuyClick">
				<img src="../static/icon/单独购买.png" alt="">
				单独购买
			</view>
			<view class="group-buy" @click="groupBuyClick">
				<img src="../static/icon/团购.png" alt="">
				发起团购
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['collectClick', 'singleBuyClick', 'groupBuyClick'],
		data() {
			return {
			};
		},
		props: {
			isCollected: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			collectClick() {
				this.$emit('collectClick')
			},
			singleBuyClick() {
				this.$emit('singleBuyClick')
			},
			groupBuyClick() {
				this.$emit('groupBuyClick')
			},
		}
	};
</script>

<style>
	.shop-buy {
		background-color: rgba(255, 255, 255, 1); /* 完全不透明的白色 */
		position: fixed;
		bottom: 0;/* 靠近底部*/
		border-top: 1px rgba(0, 0, 0, 0.2) solid;
		width: 100vw;
		height: 120rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: white
	}

	.shop-buy img {
		width: 30px;
		vertical-align: middle;
	}

	.shop-buy .collect {
		width: 80px;
		height: 40px;
		display: flex;
		justify-content: center;
	}

	.shop-buy .buy {
		flex: 1;
		text-align: center;
		background-color: pink;
		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shop-buy .group-buy {
		flex: 1;
		text-align: center;
		background-color: orangered;
		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
